<template>
  <div class="q-pa-md q-gutter-sm">
    <t-editor
      v-model="editor"
      flat
      content-class="bg-amber-3"
      toolbar-text-color="white"
      toolbar-toggle-color="yellow-8"
      toolbar-bg="primary"
      :toolbar="[
        ['bold', 'italic', 'underline'],
        [
          {
            label: $q.lang.editor.formatting,
            icon: $q.iconSet.editor.formatting,
            list: 'no-icons',
            options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'],
          },
        ],
      ]"
    />
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      return {
        editor: ref('Customize it.'),
      };
    },
  };
</script>
